import React, { Component } from 'react'
import "./mynews.scss"
import { getApiUserMessage , getApiCleanMessage } from "../../axios/api"
import { get } from '../../axios/localstorage';
import { message } from 'antd';

export default class mynews extends Component {


    state = {
        list:[],
        delAlert:false,
    }

    componentWillMount(){
        this.getData();
    }

    componentDidMount(){
        window.scroll(0,0)
    }

    getData=()=>{
        let param = {
            token:get('token'),
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        getApiUserMessage(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoDel=()=>{
        let param = {
            token:get('token'),
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        getApiCleanMessage(param)
        .then( req =>{
            this.setState({delAlert:false})
            if(req.data.code === 1){
                message.success("删除成功！");
                this.getData();
            }else{
                message.info(req.data.msg);
            }
        }).catch(err =>{
            console.error(err);
        })
    }

    render() {
        return (
            <div className="mynews">
                <div className="mbox">
                    <div className="title">
                        <h2>我的消息</h2>
                        <button onClick={()=>{this.setState({delAlert:true})}}>一键清除</button>
                    </div>

                    <div className="none" hidden={this.state.list.length !== 0}>
                        <div className="cen">
                            <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                        </div>
                        <p>暂无消息记录</p>
                    </div>

                    {
                        this.state.list.map((item,index)=>{
                            return <div className="item" key={index}>
                                        <h1>「{item.type?"私信":"公告"}」</h1>
                                        <div className="right">
                                            <h2>{item.create_time_text}</h2>
                                            <div className="cont" dangerouslySetInnerHTML={{
                                                __html: item.json
                                            }}></div>
                                        </div>
                                    </div>
                        })
                    }
                </div>

                <div className="alert" hidden={!this.state.delAlert}>
                    <div className="delBox">
                        <div className="cen">
                            <img alt="" src="assets/imgs/cuowutishi.png" />
                        </div>
                        <h2>删除提示</h2>
                        <p>确定要清除所有消息吗？</p>
                        <div className="abtns">
                            <button className="btn1" onClick={()=>{this.gotoDel()}}>确定</button>
                            <button className="btn2" onClick={()=>{this.setState({delAlert:false})}}>取消</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
